<template>
  <view :class="theme">
    <view class="bg-5 fd-row ai-center" style="padding: 30rpx 30rpx 120rpx; border-radius: 0 0 16rpx 16rpx;" />

    <view class="bg-2 br-16"
      style="margin: -120rpx 30rpx 30rpx; padding: 30rpx 24rpx; box-shadow: 0 0 10rpx 0 rgba(0,0,0,0.1);">

      <label class="jc-sb pb-30" style="border-bottom: 2rpx dashed #f4f4f4;">
        <text class="fs-26">我的星核余额</text>
        <text class="color-15 fs-36 fw-700">{{ Number(userInfo.coin || 0).toFixed(2) }}</text>
      </label>

      <view>
        <label class="fs-26 color-9 mt-30">请选择运营商</label>
        <view class="mt-30 fd-row jc-sb">
          <label @click="providers.current !== index && (providers.current = index)"
            v-for="(item, index) in  providers.list" :key="index"
            :style="{ ...(providers.current === index ? { backgroundColor: '#e1eaff', border: `1px solid #3781ff`, color: $config.COLOR_5 } : { backgroundColor: '#f9f9f9' }), width: `200rpx`, height: `90rpx`, }"
            class="jc-center ai-center fs-26 br-8">
            {{ item.name }}
          </label>
        </view>
      </view>

      <view class="mt-50">
        <view class="fd-row jc-sb">
          <text class="fs-26 color-6">充值手机号码</text>

          <label @click="showPopup.rule = true">
            <u-icon size="32" :color="$config.COLOR_9" name="info-circle" />
            <text class="ml-10 fs-22 color-6">话费充值规则</text>
          </label>
        </view>

        <view class="fd-row mt-30 br-8 pr-30 ai-center"
          style="height: 90rpx; background-color: #fbfbfb; box-shadow: inset 0 2rpx 6rpx 0 rgba(0,0,0,0.1);">
          <input v-model="phoneNumber" class="f1 height-100percent pl-30 pr-30 fs-36" type="number" maxlength="11"
            placeholder="请输入手机号码" placeholder-class="color-9" />
          <u-icon size="36" :color="$config.COLOR_5" name="man-add" />
        </view>
      </view>

      <view class="mt-30">
        <view class="fd-row flex-wrap">
          <view v-for="(option, index) in  options" :key="index" class="br-8 oh"
            style="width: calc((100% - 24rpx) / 2); margin: 0 6rpx 30rpx; background-color: #fafafa;">
            <view class="relative">
              <u-image width="100%" height="134" src="/static/img/bg-phoneBill.png" />
              <view class="absolute jc-center p-16" style="top: 0; right: 0; bottom: 0; left: 0;">
                <text class="fw-700 color-2">
                  <text class="fs-60">{{ option.money }}</text>
                  <!-- <text class="fs-28">.{{ option.money }}</text> -->
                  <text class="fs-28">元</text>
                </text>
              </view>
            </view>

            <view class="p-16 mt-12 fd-row ai-center jc-sb">
              <text>
                <text class="fs-34">{{ option.coin }}</text>
                <!-- <text class="fs-26">.{{ option.coin }}</text> -->
                <text class="ml-2 fs-34">星核</text>
              </text>
              <button @click="recharge(index)" hover-class="tap-hover" class="color-5 fs-20 lh-40 br-20 m-0"
                :style="{ borderColor: $config.COLOR_5 }" plain>
                兑换
              </button>
            </view>
          </view>
        </view>
      </view>
    </view>

    <u-popup v-model="showPopup.rule" @input="changePopup($event, 'rule')" mode="center" :closeable="false"
      :mask-close-able="false" close-icon-color="#8c9ff7">
      <view>
        <u-image class="as-center" width="364" height="270" src="/static/img/img-notice.png" />
        <view class="jc-sb bg-2 br-12"
          style="top: 350rpx; right: 70rpx; bottom: 70rpx; left: 70rpx; width: 600rpx; padding: 150rpx 60rpx 30rpx; margin: -180rpx 0 0;">
          <text class="color-3 fw-600 fs-30 text-center">话费充值规则</text>
          <view class="mt-24 color-9 lh-40">
            <text>1、使用本充值服务，每个用户每月充值金额。</text>
            <text>2、充值期间，请勿自己充值或者在其他渠道充值，否则可能产生错误，无法进行售后，请知悉。</text>
            <text>3、若出现充值未到账的情况，请于充值48小时以后联系客服进行售后处理，话费充值售后时间为7天，过期无法售后，请知悉。</text>
          </view>
          <button @click="showPopup.rule = false" style="margin: 70rpx 0 0; line-height: 88rpx;" hover-class="tap-hover"
            class="bg-6 br-12 color-2 fs-30 fw-600">好的</button>
        </view>
      </view>
    </u-popup>

    <!-- <u-popup v-model="showPopup.notice" @input="changePopup($event, 'notice')" mode="center" :closeable="false"
      :mask-close-able="false" close-icon-color="#8c9ff7">
      <view>
        <u-image class="as-center" width="364" height="270" src="/static/img/img-notice.png" />
        <view class="jc-sb bg-2 br-12 text-center"
          style="top: 350rpx; right: 70rpx; bottom: 70rpx; left: 70rpx; width: 600rpx; padding: 150rpx 60rpx 30rpx; margin: -180rpx 0 0;">
          <text class="color-3 fw-600 fs-30">工程师正在疯狂的搭建中...</text>
          <text class="mt-24 color-9">敬请期待</text>
          <button @click="uniNavigator({ type: 'navigateBack' })" style="margin: 70rpx 0 0; line-height: 88rpx;"
            hover-class="tap-hover" class="bg-6 br-12 color-2 fs-30 fw-600">好的</button>
        </view>
      </view>
    </u-popup> -->

    <u-popup v-model="showPopup.password" @input="changePopup($event, 'password')" mode="center" closeable
      :mask-close-able="false" close-icon-color="#333">
      <view class="bg-2 oh br-20" style="width: 90vw;">
        <view class="mt-30 ai-center">
          <text class="mt-16 mb-30 color-6 fs-32 fw-700">请输入支付密码</text>
          <u-message-input @change="inputPayPassword" @finish="submit" focus width="80" :maxlength="6" space="5"
            dot-fill />
        </view>
        <view @click="uniNavigator({ url: `/pages/client/main/setPayPassword` })" hover-class="tap-hover"
          class="mt-10 mb-30 p-20 as-center ml-12 color-5" style="text-decoration: underline;">
          忘记支付密码？
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script lang="ts" setup>
import { useMapState } from "@/common/libs/store";
import { isPhoneNumber, uniNavigator } from "@/common/libs/utils";
import { onLoad } from "@dcloudio/uni-app";
import { ref, reactive } from "vue";

const { theme } = useMapState(["theme"]);
const { $config = {} } = getApp().globalData || {};

const providers = reactive({
  list: [
    { name: "中国电信", value: 3 },
    { name: "中国移动", value: 1 },
    { name: "中国联通", value: 2 }
  ],
  current: 0,
});

const userInfo = ref<any>({});
const phoneNumber = ref("");
const showPopup = reactive({
  rule: false,
  password: false
  // notice: true
});
const options = ref<AnyObject[]>([]);
const payPassword = ref("");

onLoad(() => {
  uni.showToast({ icon: "loading" });
  uni.request({
    url: "/rechargeList",
    success({ data }: any) {
      options.value = data;
      uni.hideToast();
    }
  });
  getUserInfo();
});

const inputPayPassword = (val: string) => {
  payPassword.value = val;
}

const getUserInfo = () => {
  uni.request({
    url: $config.API_USER_INFO_GET,
    success({ data }: any) {
      userInfo.value = data;
    }
  });
}

let params: AnyObject;
const submit = () => {
  uni.request({
    url: "/phoneRecharge",
    data: { ...params, pay_pass: payPassword.value },
    success({ msg: title }: any) {
      uni.showToast({ title, duration: 1200 });
      setTimeout(uni.navigateBack, 1200);
    }
  });
}

const recharge = (index: number) => {
  if (!isPhoneNumber(phoneNumber.value)) {
    uni.showToast({ title: "手机号码输入有误", icon: "none" });
    return;
  }
  params = {
    money: options.value[index].money,
    phone_type: providers.list[providers.current].value,
    phone: phoneNumber.value
  };
  showPopup.password = true;
}

const changePopup = (e: boolean, popupKey: keyof typeof showPopup) => {
  showPopup[popupKey] = e;
}

</script>

<style lang="scss" scoped>
// scss
::v-deep {
  .uni-sample-toast {
    width: 80%;
  }
}
</style>